<template>
  <div class="box">
    <div
      class="none"
      v-if="atTol===0"
    >
      <i class="iconfont"></i>
      <span>暂时还没有收到@</span>
    </div>
    <div
      class="msgs"
      v-if="atTol!==0"
    >
      <div
        class="item"
        v-for="(item,index) in atInfo"
        :key="index"
      >
        <div class="left"><img :src="item.userPic"></div>
        <div class="right">
          <div class="type">
            <a href="#">{{item.nickname}}</a>
            <span>评论</span>
          </div>
          <div class="time"><a href="#">{{item.time | dateFormat}}</a></div>
          <div class="text">
            <a href="#">@佳</a>&nbsp;hhh
          </div>
          <div class="auto">
            <div class="cover"><img src=""></div>
            <div class="scnt">
              <h3><a href="#">{{item.json.resource.name}}</a></h3>
              <h4>by&nbsp;<a href="#">mayuko然</a></h4>
            </div>
          </div>
          <div class="doper">
            <a href="#">查看音乐</a>
            <span>|</span>
            <a href="#">回复</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
// import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  data () {
    return {
      atInfo: [],
      atNewCount: 0,
      atTol: 0
    }
  },
  created () {
    this.getAT()
  },
  methods: {
    async getAT () {
      console.log('艾特信息：')
      let res = await axios.get('https://autumnfish.cn//msg/forwards?limit=30')
      console.log(res)
      this.atInfo = res.data.forwards
      this.atNewCount = res.data.newCount
      this.atTol = res.data.forwards.length
      for (let i = 0; i < res.data.forwards.length; i++) {
        this.atInfo[i].userPic = await axios.get('https://autumnfish.cn//user/detail?uid=' + this.atInfo[i].userId).data.profile.avatarUrl
        this.atInfo[i].nickname = await axios.get('https://autumnfish.cn//user/detail?uid=' + this.atInfo[i].userId).data.profile.nickname
        this.atInfo[i].json = JSON.parse(this.atInfo[i].json)
        // console.log(this.atInfo[i].json)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.none {
  margin-top: 119px;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  .iconfont {
    display: inline-block;
    margin-right: 17px;
    width: 64px;
    height: 50px;
    background-image: url(../../assets/image/icon.png);
    background-position: 0 -347px;
  }
}
.msgs {
  margin-bottom: 40px;
  margin-top: 1px;
  .item {
    padding: 16px 0;
    border-bottom: 1px dotted #ccc;
    display: flex;
    justify-content: left;
    // align-items: center;
    .left {
      width: 50px;
      height: 50px;
      img {
        width: 50px;
        height: 50px;
      }
    }
    .right {
      margin-left: 20px;
      position: relative;
      width: 90%;
      .type {
        font-size: 14px;
        a {
          color: #0c73c2;
        }
        span {
          margin-left: 5px;
          color: #666;
        }
      }
      .time {
        position: absolute;
        top: 0;
        right: 0;
        color: #999;
        a {
          font-size: 12px;
        }
      }
      .text {
        margin-top: 10px;
        line-height: 24px;
        font-size: 14px;
        word-break: break-word;
        a {
          color: #0c73c2;
        }
      }
      .auto {
        width: 100%;
        background: #f5f5f5;
        padding: 10px;
        margin: 4px 0 5px;
        display: flex;
        justify-content: left;
        align-items: center;
        .cover {
          width: 40px;
          height: 40px;
          img {
            width: 40px;
            height: 40px;
          }
        }
        .scnt {
          margin-left: 20px;
          h3 {
            font-weight: normal;
            font-size: 14px;
            color: #333;
            a {
              font-size: 14px;
            }
          }
          h4 {
            font-weight: normal;
            font-size: 12px;
            color: #999;
            a {
              font-size: 12px;
            }
          }
        }
      }
      .doper {
        margin: 18px 0 -2px;
        text-align: right;
        line-height: normal;
        a {
          color: #0c73c2;
          font-size: 12px;
        }
        span {
          margin: 0 10px 0 12px;
          color: #c7c7c7;
        }
        a:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
</style>
